<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
    <div id="box" class="container">
        <div class="row">
            <h1 class="text-danger">请输入用户信息</h1> <br/>
            <div class="container text-center form">

                    <div class="input-group">
                        <label for="name" class="input-group-addon ">用户名：</label>
                        <input type="text" id="name" v-model="name" class="form-control" checked>
                    </div>
                    <br/> <br/>
                    <div class="input-group">
                        <label for="age" class="input-group-addon ">年　龄：</label>
                        <input type="number" id="age" v-model="age" class="form-control" min="18" checked>
                    </div>
                    <br/> <br/>
                    <input type="button" value="提交"  @click="add" class="btn btn-success">
                    <input type="reset" value="重置" class="btn btn-info">

            </div>
        </div>

        <div class="container">
            <h1 class="text-success">用户信息表</h1>
            <div class="container">
                <table class="table table-responsive">
                    <tr>
                        <th>用户ID</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>操作</th>
                    </tr>
                    <tbody>
                        <tr v-for="(v,k) in arr">
                            <td>{{k}}</td>
                            <td>{{v.user}}</td>
                            <td>{{v.age}}</td>
                            <td><input type="button" value="删除" @click="del(k)"/></td>
                        </tr>
                    </tbody>
                    <tr>
                        <td colspan="4">
                            <input type="button" value="全部删除" class="btn btn-danger" @click="delAll">
                        </td>
                    </tr>
                </table>
            </div>
        </div>

    </div>
    <script>
        var app = new Vue({
            el:"#box",
            data:{
                name:"",
                age: "",
                json:{},
                arr:[],



            },
            methods:{
                add:function () {
                    if(this.name=="" && this.age==""){
                        alert("请输入用户信息!");
                    }else{
                        this.json = {user:this.name,age:this.age};
                        this.arr.push(this.json);
                        this.name="";
                        this.age="";
                    }

                },
                del:function (k) {

                    this.arr.pop(k);
                },
                delAll:function () {
                    this.arr.splice(0,this.arr.length);
                }
            }
        })
    </script>

</body>
</html>